<template>
  <div class="layout-container">
    <el-splitter>
      <el-splitter-panel v-model:size="size" :min="260" @update:size="updateSize">
        <div class="left-content">
          <slot name="left-content"></slot>
        </div>
      </el-splitter-panel>
      <el-splitter-panel :min="460">
        <div class="right-content">
          <slot name="right-content"></slot>
        </div>
      </el-splitter-panel>
    </el-splitter>
  </div>
</template>
<!--  总体布局   -->
<script setup>
import { ref } from 'vue'

const emit = defineEmits(['size-change'])

const size = ref(260)
const winW = ref(window.innerWidth)

//左边面板变化
const updateSize = (num) => {
  emit('size-change', num)
}

window.ipcRenderer.on('window-resized', (_, data) => {
  if (data.width - winW.value < 100) return
  if (data.width > winW.value) {
    size.value = 500
    updateSize(size.value)
  } else {
    size.value = 300
    updateSize(size.value)
  }
  winW.value = data.width
})
</script>

<style lang="scss" scoped>
.layout-container {
  display: flex;

  .left-content {
    //width: 250px;
    background: #e6e5e5;
    border-right: 2px solid #b0b0b0;
  }

  .right-content {
    flex: 1;
    //height: calc(100vh - 2px);
    background: #f5f5f5;
    width: 100%;
  }
}

.el-splitter-bar__dragger {
  background: transparent;
  z-index: 0;
}
</style>
